
Vue.component("eltable",{
    
     data(){
         return{
             column:[] // 存放了子组件对象，每个子组件对象上有label、prop数据
         }     
     },
     mounted(){
    },
    props: {
          data: {
          type: Array,
          default: [],
        },
      },
    template:`<table border="1" cellpadding="20" cellspacing="0">
    <thead>
    <tr>
    <th v-for="thItem in column">{{thItem.label}}</th>
    </tr>
    </thead> 
    <tbody>
    <tr v-for="trItem in data">
    <td v-for="(tdItem , i) in column">
    {{column[i].$scopedSlots.default ? column[i].$scopedSlots.default(trItem)[0].text : trItem[tdItem.prop]}}
    </td>
    </td>
    </tr>
    <slot></slot>
    </tbody> 
  </table>`
})

Vue.component("tablecolumn",{

    //属性注入到组件实例中
    props:["prop","label"], 

    template:`<span></span>`,

    mounted(){

        this.$parent.column.push(this)  // this是组件实例 
    }
})